<!--模版备用-->
<template>
    <div class="search-feature relative">
        <div class="search-input relative">
            <input type="text" placeholder="搜索">
            <span class="icon icon-search"></span>
        </div>
        <div class="search-history">
            <div class="search-history-title bt bb"><span class="icon"></span>历史搜索</div>
            <div class="search-history-list">
                <div class="search-history-item bb">13412312341 <span class="search-history-delete fr">X</span></div>
                <div class="search-history-item bb">13412312342 <span class="search-history-delete fr">X</span></div>
                <div class="search-history-item bb">13412312343 <span class="search-history-delete fr">X</span></div>
                <div class="search-history-item bb">13412312344 <span class="search-history-delete fr">X</span></div>
                <div class="search-history-item bb">13412312345 <span class="search-history-delete fr">X</span></div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data(){
            return {};
        },
        methods: {
            abc(e){
                console.log(e);
            },
            alert(){
                alert(123);
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import "../../assets/css/common.scss";

    .search-feature{
        .search-input{
            margin: rem(8) rem(12);
            input{
                background:#a68f88;
                border-radius: rem(5);
                height: rem(28);
                width: 100%;
                padding: rem(6) rem(6) rem(6) rem(30);
                font-size: rem(14);
                color: #fff;
            }
            span{
                display: block;
                position: absolute;
                left: rem(5);
                top: rem(5);
                color: #000;
                border: rem(1) solid #666;
                border-radius: rem(5);
                width: rem(20);
                height: rem(15);
                text-align: center;
                padding-top: rem(3);
            }
        }
        .search-history{
            font-size: rem(16);
            background-color: #fff;
            .search-history-title{
                padding: rem(12) rem(12);
                color: #ddd0cc;
                span{
                    width: rem(20);
                    height: rem(20);
                    float: left;
                    background-color: #cfe;
                }
            }
            .search-history-item{
                padding: rem(12);
            }
        }
    }
</style>
